<template>
  <div id="settingItem">
    <a href="#" @mousedown="isClicked" @mouseup="notClicked" :class="{'clicked':isClick}">
      <div v-if="!isActive" id="itemImg">
        <img :src='itemSrc'>
      </div>
      <!--    <div v-else>-->
      <!--      <img :src="itemSrc">-->
      <!--    </div>-->
      <div id="text">
        <slot name="text">{{itemText}}</slot>
      </div>
      <div v-if="!isActive" id="default_img">
        <img src="~assets/img/profile/setting/jiantou.png">
      </div>
      <!--    <div v-else>-->
      <!--      <img src="">-->
      <!--    </div>-->
    </a>
  </div>
</template>

<script>
  export default {
    name: "settingItem",
    props: {
      itemText: {
        type: String,
        default() {
          return '';
        }
      },
      itemSrc: {
        type: String,
        default() {
          return '';
        }
      }
    },
    data() {
      return {
        isActive: false,
        isClick: false,
      }
    },
    methods:{
      isClicked(){
        this.isClick = true;
      },
      notClicked(){
        this.isClick = false;
      }
    }
  }
</script>

<style scoped>
  #settingItem a {
    height: 52px;
    width: 100%;
    margin: 3px auto;
    background-color: #fffcfc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .clicked{
  background-color: #da6169;
}
  #settingItem div {
    height: 100%;
    display: flex;
    align-items: center;
  }
  #default_img{
    width: 49px;
  }
  #itemImg{
    width: 58px;
    margin-left: 5px;
    justify-content: space-around;
  }
  #itemImg img{
    height: 60%;
  }
  #default_img img{
    height: 48%;
  }
  #text {
    flex-grow: 2;
    text-align: left;
    line-height: 100%;
  }
</style>
